<template>
  <el-tooltip
    class="item"
    effect="dark"
    :content="
      Array.isArray(query[column.prop])
        ? query[column.prop].join(',')
        : typeof query[column.prop] == 'number'
        ? query[column.prop] + ''
        : query[column.prop]
    "
    placement="top"
  >
    <el-form-item :label="column.name" :prop="column.prop">
      <el-row :gutter="0" v-if="column.icon">
        <el-col :span="20">
          <slot></slot>
        </el-col>
        <el-col :span="4">
          <i
            :class="column.icon"
            v-bind="$attrs"
            v-on="$listeners"
            style="margin-left: 10px; width: 20px; height: 20px; cursor: pointer"
            @click="() => iconHandler(column.iconMethod, query, column)"
          ></i>
        </el-col>
      </el-row>
      <template v-else>
        <slot></slot>
      </template>
    </el-form-item>
  </el-tooltip>
</template>

<script>
export default {
  name: 'FormWrapper',
  props: {
    query: {
      type: Object,
      default: () => {},
    },
    column: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    // 图标事件
    iconHandler(method, query, column) {
      console.log(column, method.name);
      if (method && typeof method == 'string') {
        this.$emit(method, query[column.prop], column.prop);
      }
    },
  },
  mounted() {
    console.log(
      this.query,
      this.column,
      '============================',
      this.query[this.column.prop],
      this.column.prop,
      this.column.name
    );
  },
};
</script>

<style lang="scss" scoped></style>
